<template>
  <Teleport to="body">
    <van-overlay :show="getIsLoading()">
      <div class="loading">
        <van-loading color="#1989fa" vertical>
          <template #icon>
            <van-icon name="star-o" size="30" />
          </template>
          加载中...
        </van-loading>
      </div>
    </van-overlay>
  </Teleport>
</template>

<script setup lang="ts">
import { useAppStore } from "@/store/useAppStore";
const appStore = useAppStore();
const { getIsLoading } = appStore;
</script>

<style scoped>
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8888;
}
</style>
